<template>
    <el-button class="button-header" type="primary" v-if="$filters.auth($filters.PrivilegeType.Add)" @click="router.push('/setting/role/create')" :icon="Plus">添加角色</el-button>
    
    <grid url="role/list"  ref="datalist">
      <el-table-column prop="name" label="角色名称" />
      <el-table-column prop="remark" label="备注" />
      <el-table-column prop="number" width="100" label="管理员人数" />
      <el-table-column align="right" :key="1"  v-if="$filters.auth($filters.PrivilegeType.Edit) || $filters.auth($filters.PrivilegeType.Delete)"  label="操作">
        <template #default="scope">
          <el-button type="text" v-if="$filters.auth($filters.PrivilegeType.Edit)"  @click="router.push(`/setting/role/edit?id=${scope.row.id}`)" size="small">修改</el-button>
          <el-popconfirm confirmButtonText="确定" v-if="$filters.auth($filters.PrivilegeType.Delete)" @confirm="handleDelete(scope.row.id)" cancelButtonText="取消" cancelButtonType="default" title="删除后不可恢复，确定删除吗？">
            <template #reference>
              <el-button type="text" size="small">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </grid>

</template>
<script lang="ts" setup>
import Grid from '@/components/Grid.vue'
import {Plus} from '@element-plus/icons-vue'
import {RoleDelete} from '@/api/role'
import {ElMessage} from 'element-plus'
import {useRouter} from 'vue-router'
import {ref} from 'vue'
const router = useRouter()
const datalist = ref<InstanceType<typeof Grid>>()
const handleDelete = (id: number):void => {
  RoleDelete({ id: id }).then((res : ServiceResponse<any>) => {
    if (res.success) {
      ElMessage.success('操作成功')
      datalist.value?.loadData()
    } else ElMessage.error(res.msg)
  })
}
</script>

<style lang="scss" scoped>
@import '@/assets/styles/mixin.scss';
@import '@/assets/styles/tablePage.scss';
</style>
